<style lang="less" rel="stylesheet/less" type="text/less">
.balance {
  font-size: 36px;
  padding-left: 20px;
  .monkey {
    color: #ffb100;
  }
}
.detail {
  font-size: 36px;
  padding: 20px 0 20px 20px;
}
.row-page {
  margin-top: 20px;
  padding-bottom: 20px;
}
</style>
<template>
  <div style="height:100%;">
    <div class="balance">
      账户余额:
      <span class="monkey">{{ balance }}元</span>
    </div>
    <div>
      <div class="detail">账户明细:</div>
      <home-search-form @search="confirmSearch" />
      <Table :columns="titleName" :data="data" class="look-views" stripe />
      <!-- 分页组件 -->
      <Row type="flex" class="row-page" justify="center">
        <Page
          :total="listTotal"
          :current="page_info.page"
          :page-size="page_info.per_page"
          :page-size-opts="[10,30,50]"
          placement="top"
          show-sizer
          show-total
          @on-change="pageChange"
          @on-page-size-change="perPageChange"
        />
      </Row>
    </div>
  </div>
</template>
<script>
import qs from "qs";
import HomeSearchForm from "./home-search-form";
import { deleteEmptyValue } from "../../utils";

export default {
  components: {
    HomeSearchForm
  },
  data() {
    return {
      token: "",
      balance: 0,
      listTotal: null,
      page_info: {
        // 分页信息
        page: 1,
        per_page: 10
      },
      search_info: {
        page: 1,
        per_page: 10
      },
      data: [],
      titleName: [
        {
          title: "序号",
          render: (h, { row }) => {
            const index = <div>{row._index + 1}</div>;
            return index;
          }
        },
        {
          title: "变更前",
          key: "change_before"
        },
        {
          title: "变更后",
          key: "change_after"
        },
        {
          title: "变更说明",
          key: "remark"
        },
        {
          title: "日期",
          //   key: "created_at",
          render: (h, { row }) => {
            this.$moment.locale(navigator.language);
            let time = this.$moment
              .utc(`${row.created_at}`)
              .local()
              .format("lll");

            return <div>{time}</div>;
          }
        }
      ]
    };
  },
  created() {
    this.token = sessionStorage.getItem("token");
    this.$Spin.show();
    this.financialList(this.page_info);
  },
  methods: {
    /**
     * 页码改变
     * @param  {string} page {当前页码}
     * @return {undefined}
     */
    pageChange(page) {
      this.search_info.page = page;
      this.search_info.per_page = this.page_info.per_page;
      this.financialList(this.search_info);
    },

    /**
     * 每页显示数改变
     * @param  {string} size {当前每页显示数}
     * @return {undefined}
     */
    perPageChange(size) {
      this.search_info.per_page = size;
      this.page_info.per_page = size;
      this.financialList(this.page_info);
    },

    // 确认搜索方法
    confirmSearch({ real_started_at, real_ended_at }) {
      this.page_info.start_time = real_started_at || null;

      this.page_info.end_time = real_ended_at || null;

      this.page_info = deleteEmptyValue(this.page_info);

      this.search_info = JSON.parse(JSON.stringify(this.page_info));

      this.financialList(this.page_info);
    },

    /**
     * 请求财务中心数据
     *
     *
     */
    financialList(param) {
      param.token = this.token;
      const query_str = qs.stringify(param);

      this.axios
        .post(
          `${window.location.origin}/admin/api/v1/customer/charges`,
          query_str
        )
        .then(({ data }) => {
          if (data.code === 200) {
            this.data = data.charges.data;
            this.listTotal = data.charges.total;
            if (data.balance) {
              this.balance = data.balance;
            }
            this.$Spin.hide();
          } else if (data.code === 7003) {
            this.$Message.error({
              content: "token验证失败,过期或token错误,请重新登录",
              duration: 5,
              closable: true
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            throw new Error(data.error);
          }
        })
        .catch(err => {
          this.$Message.error({
            content: err.message || err.statusText,
            duration: 5,
            closable: true
          });
        });
    }
  }
};
</script>
